<template>
  <div class="login-background">
    <div class="login">
      <h2>欢迎来到银行金库智能化安防系统</h2>
      <el-form ref="loginForm" :model="loginForm" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="loginForm.role" placeholder="请选择身份">
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="安防人员" value="security"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="goToRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--    <div id="video-stream-viewer">
     <img :src="videoFeedUrl" alt="Video Stream" @error="handleImageError"/>
     <div v-if="error" class="error-message">{{ errorMessage }}</div>
   </div>-->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'UserLogin',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        role: '' // 用户身份
      }/*,
      videoFeedBaseUrl: 'http://127.0.0.1:5000/video_feed/', // 基础URL指向你的Flask应用
      videoFeedUrl: 'http://127.0.0.1:5000/video_feed/0', // 初始视频流URL
      error: false,
      errorMessage: ''*/
    };
  },
  methods: {
//     async login() {
//   try {
//     // 在登录时发送关闭摄像头请求
//     const cameraCloseResponse = await fetch('/close_camera', {
//       method: 'POST',
//       headers: {
//         'Content-Type': 'application/json'
//       },
//       body: JSON.stringify({
//         action: 'close_camera'
//       })
//     });
//
//     if (!cameraCloseResponse.ok) {
//       console.error('关闭摄像头失败', cameraCloseResponse.statusText);
//       throw new Error('关闭摄像头失败'); // 可以选择抛出错误，让外部知道关闭摄像头失败
//     }
//
//     // 假设 axios 已经在其他地方被引入
//     const loginResponse = await axios.post('http://localhost:8083/login', {
//       username: this.loginForm.username,
//       password: this.loginForm.password
//     });
//
//     // 检查登录响应
//     if (loginResponse.status !== 200) {
//       console.error('登录失败', loginResponse.statusText);
//       this.$message.error('登录失败');
//       return;
//     }
//
//     // 检查用户角色是否匹配
//     if (loginResponse.data.user.role !== this.loginForm.role) {
//       this.$message.error('身份不匹配');
//       return;
//     }
//
//     // 登录成功，存储用户名和身份到 localStorage
//     localStorage.setItem('username', loginResponse.data.user.username);
//     localStorage.setItem('role', loginResponse.data.user.role);
//
//     // 登录成功后跳转到仪表板页面
//     this.$router.push('/dashboard');
//   } catch (error) {
//     // 捕获所有异常，包括网络错误、JSON解析错误等
//     console.error('登录过程中发生错误:', error);
//     this.$message.error('登录过程中发生错误');
//   }
// },
    async login() {
      try {
        const response = await axios.post('http://localhost:8083/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        });

        if (response.data.user.role !== this.loginForm.role) {
          this.$message.error('身份不匹配');
          return;
        }

        // 登录成功，存储用户名和身份到 localStorage
        localStorage.setItem('username', response.data.user.username);
        localStorage.setItem('role', response.data.user.role);
        // 登录成功后跳转到仪表板页面
        this.$router.push('/dashboard');
      } catch (error) {
        this.$message.error(error.response.data.message);
      }
    },
    goToRegister() {
      this.$router.push('/register');
    }
  }
};
</script>


<style scoped>
.login-background {
  background-image: url('@/assets/background.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  width: 400px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login h2 {
  text-align: center;
  margin-bottom: 20px;
}


</style>